<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/companyList/'+ids }">机关管理</el-breadcrumb-item>
    <el-breadcrumb-item>新建机关</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>
    <el-button :icon="Expand" color="#626aef" style="color: white" round @click="pageList">
      机关列表
    </el-button>

    <span class="onBtnRight"  @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>
  <div class="tabInfo">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息（必填）" name="one">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="* 机关名称">
        <el-input v-model="formInline.name" placeholder="机关名称必填"></el-input>
      </el-form-item>
      <el-form-item label="所在年级">
        <el-select v-model="formInline.grade" placeholder="所在年级" >
          <el-option
              v-for="item in Default.grade"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="* 总人数">
        <el-input v-model="formInline.total_number" type="number" placeholder="总人数必填"></el-input>
      </el-form-item>
      <el-form-item label="* 男孩人数">
        <el-input v-model="formInline.boys_number" type="number" placeholder="男孩人数必填"></el-input>
      </el-form-item>
      <el-form-item label="* 女孩人数">
        <el-input v-model="formInline.girls_number" type="number" placeholder="女孩人数必填"></el-input>
      </el-form-item>
      <el-form-item label="* 详细地址">
        <el-input v-model="formInline.address" placeholder="详细地址必填"></el-input>
      </el-form-item>
      <el-form-item label="* 联系电话">
        <el-input v-model="formInline.mobile" type="number" placeholder="联系电话必填"></el-input>
      </el-form-item>
      <el-form-item label="* 负责人">
        <el-input v-model="formInline.cadre" placeholder="负责人必填"></el-input>
      </el-form-item>
      <el-form-item label="* 园长姓名">
        <el-input v-model="formInline.principal" placeholder="园长姓名必填"></el-input>
      </el-form-item>
      <el-form-item label="* 教师人数">
        <el-input v-model="formInline.teacher_number" type="number" placeholder="教师人数必填"></el-input>
      </el-form-item>
    </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="next">
      <el-button color="#626aef" style="color: white" round @click="onSubmit">保存</el-button>
    </div>
  </div>

</template>

<script setup>
import { Edit, CirclePlus, Search, Expand } from '@element-plus/icons-vue'
import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
import Drawer from './common/Drawer.vue';
import Header from './common/Header.vue';
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router"
import zhCn from'element-plus/lib/locale/lang/zh-cn'
import * as api from "../api/loginHttp";
import {archivesAdd} from "../api/loginHttp";
const router = useRouter()
const route = useRoute()
const ids = ref()
const labName = ref()
const activeName = ref('one')

const formInline = ref({
  name : '',
  total_number : '',
  boys_number : '',
  girls_number : '',
  address : '',
  mobile : '',
  cadre : '',
  principal : '',
  teacher_number : '',
  group_id : '',
  grade : '',
})
const Default = reactive({
  grade: [
    {
      value: '小班2-3岁',
      label: '小班2-3岁'
    },
    {
      value: '中班3-4岁',
      label: '中班3-4岁'
    },
    {
      value: '大班4-5岁',
      label: '大班4-5岁'
    },
    {
      value: '学前班5-6岁',
      label: '学前班5-6岁'
    },
    {
      value: '一年级6-7岁',
      label: '一年级6-7岁'
    },
    {
      value: '二年级7-8岁',
      label: '二年级7-8岁'
    },
    {
      value: '三年级8-9岁',
      label: '三年级8-9岁'
    },
    {
      value: '四年级9-10岁',
      label: '四年级9-10岁'
    },
    {
      value: '五年级10-11岁',
      label: '五年级10-11岁'
    },
    {
      value: '六年级11-12岁',
      label: '六年级11-12岁'
    },
    {
      value: '七年级12-13岁',
      label: '七年级12-13岁'
    },
    {
      value: '八年级13-14岁',
      label: '八年级13-14岁'
    },
    {
      value: '九年级14-15岁',
      label: '九年级14-15岁'
    },
  ],
})

const fetchData = async () => {
  if(route.params.groupId) {
    ids.value = route.params.groupId
    if(ids.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if(ids.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if(ids.value == 6) {
      labName.value = '成年人营养测评'
    } else if(ids.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (ids.value == 8) {
      labName.value = '团体营养测评'
    } else {
      labName.value = '婴幼儿营养测评'
    }
    formInline.value.group_id = route.params.groupId;
  } else {
    ElMessage.error('栏目编号不得为空')
    await router.push({'path': '/Home'})
  }
}

const  onSubmit = async () =>{
  if(formInline.value.group_id==''){
    ElMessage.error('所属模块不得为空')
    onNext('one')
    return false;
  }
  if(
      formInline.value.name==''
      || formInline.value.total_number==''
      || formInline.value.boys_number==''
      || formInline.value.girls_number==''
      || formInline.value.address==''
      || formInline.value.mobile==''
      || formInline.value.cadre==''
      || formInline.value.principal==''
      || formInline.value.teacher_number==''
  ){
    ElMessage.error('必填项不能为空')
    onNext('one')
    return false;
  }
  let params = formInline._rawValue
  const res = await api.childrenCompanyAdd(params);
  if(res.data.code === 1) {
    ElMessage.success(res.data.msg)
    await router.push({'path': '/CompanyList/' +formInline.value.group_id})
  } else {
    ElMessage.error(res.data.msg)
  }
}

const onNext =  (type) => {
  activeName.value = type
}


const pageList = async () => {
  await router.push({'path': '/CompanyList/' + ids.value})
}

const onHome = async () => {
  await router.push({'path': '/Home'})
}

//自动加载
onMounted(() => {
  fetchData()
})

</script>

<style scoped>
.tabInfo .el-tabs {
  width: 80%;
  margin-top: 40px;
  margin-left: 120px;

}
/deep/ .el-form-item__content .el-input-group {
  vertical-align: top;
  width: 202px;
}

.tabInfo{
  width: 100%;
}
.one{
  padding: 7px 10px;
  margin-right: 5px;
  box-sizing: border-box;
  float: left;
  font-weight: 500;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
}
::v-deep .el-tabs__content {
  margin-left: 5%;
}

::v-deep .el-form-item__label {
  width: 110px;
}
::v-deep .el-form {
  margin: 20px;
}

::v-deep .el-input--prefix .el-input__inner{
  border: 1px solid #ececec;
  width: 202px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  border-radius: 2px;
}

.next {
  width: 100%;
  text-align: center;
  padding: 20px 0px;
}
::v-deep .el-input--suffix {
  width: 202px;
}

::v-deep .el-radio-group {
  width: 202px;
}
::v-deep .el-button--success{
  background: #2AB28B;
}
</style>
